<template>
  <div class="rela">
    <div
      :style="{
        zIndex: onboardingGuideStep == 3 ? 10001 : 1,
      }"
      ref="backIcon"
      class="back absolute shou"
      @click="back()"
    ></div>
    <div style="width: 1200px; margin: 0 auto">
      <onboardingGuide
        :step="onboardingGuideStep"
        :show="onboardingGuideShow"
        :rect="onboardingGuideRect"
      ></onboardingGuide>
      <div class="flexBet">
        <div
          ref="nav"
          class="left"
          :style="{
            height:
              courseInfo && courseInfo.courseType == 3 ? '458px' : '458px',
            zIndex: onboardingGuideShow && onboardingGuideStep == 2 ? 10001 : 1,
            overflow: 'hidden',
          }"
        >
          <div class="title">学生得分</div>
          <div class="leftcontain">
            <div
              v-if="item.show"
              :class="[
                activeName === item.name ? 'tab_item active' : 'tab_item',
                'flex',
                'shou',
              ]"
              @click="navTo(item)"
              v-for="(item, index) in tabPanes"
              :key="index"
            >
              <img
                class="icon"
                :src="activeName === item.name ? item.activeimg : item.img"
                alt="加载失败"
              />
              <div class="label">
                {{ item.label }}
              </div>
            </div>
          </div>
        </div>

        <card
          class="flex rela"
          :width="912"
          height="calc(100vh - 68px - 18px - 30px)"
          style="overflow: hidden"
        >
          <!-- 教学 -->
          <div v-loading="loading" class="teaching transitionAnimations">
            <!-- 标题 -->
            <div class="top_Title">
              <div style="display: flex; align-items: center">
                <div class="course_name">
                  <img
                    class="course_icon"
                    src="@/assets/images/group_icon/course_icon.png"
                    alt="加载失败"
                  />
                  <div
                    class="overTxt text"
                    :style="{ width: msgExpandAnimate ? 'auto' : 'auto' }"
                  >
                    《{{ courseInfo.courseName }}》
                  </div>
                </div>
                <div class="class_name">
                  <!-- <img
                    src="@/assets/images/group_icon/turn_class_icon.png"
                    alt="加载失败"
                  /> -->
                  <div class="overTxt text">
                    -{{ courseInfo.schedulingName }}
                  </div>
                </div>
              </div>
            </div>
            <!--内容 -->
            <div class="contain">
              <component
                :courseInfo="courseInfo"
                :is="activeName"
                :activeName="activeName"
              ></component>
            </div>
          </div>
        </card>
      </div>
    </div>
  </div>
</template>

<script>
import { updateGuide } from '@/api/login'
import onboardingGuide from '@/components/onboardingGuide'
import normal_attendance from './components/normal_attendance.vue'
import normal_discipline from './components/normal_discipline.vue'
import normal_classShow from './components/normal_classShow.vue'
import normal_homework from './components/normal_homework.vue'
import normal_exam from './components/normal_exam.vue'
import normal_other from './components/normal_other.vue'
import Card from '@/components/card.vue'
import { getDistributionList } from '@/api/course/course'

export default {
  components: {
    normal_attendance,
    normal_discipline,
    normal_classShow,
    normal_homework,
    normal_exam,
    normal_other,
    Card,
    onboardingGuide
  },
  data() {
    return {
      expand: true,
      activeName: 'normal_classShow',
      courseInfo: {},
      loading: false,
      msgExpandAnimate: true,
      tabPanes: [
        { name: 'normal_classShow', label: '课堂表现' },
        { name: 'gong_homework', label: '课后作业' },
        { name: 'gong_exam', label: '任务考核' },
        { name: 'normal_attendance', label: '考勤' },
        { name: 'normal_discipline', label: '纪律' },
        { name: 'normal_classShow', label: '课堂表现' },
        { name: 'normal_homework', label: '课后作业' },
        { name: 'normal_exam', label: '课后考核' },
        { name: 'normal_other', label: '其他' }
      ],
      // 新手指导
      onboardingGuideShow: false,
      onboardingGuideRect: {
        navTop: 0,
        navLeft: 0,
        navWidth: 0,
        navHeight: 0,
        backTop: 0,
        backLeft: 0
      },
      onboardingGuideStep: 2
    }
  },

  watch: {},
  async mounted() {
    // let res = await updateGuide({
    //   guide: 0,
    //   userId: this.$store.getters.userId,
    // });
    // if (res.code == 200) {
    //   this.$store.dispatch("Setguide", 0);
    // }
    //是否开启新手指导

    if (
      (this.$store.getters.guide == 0 || this.$store.getters.guide == 2) &&
      this.$store.getters.curRole == 'teacher'
    ) {
      this.onboardingGuideShow = true
      this.$nextTick(() => {
        // 确保 myElement 存在
        if (this.$refs.nav) {
          console.log(this.$refs)
          const nav = this.$refs.nav.getBoundingClientRect()
          const backIcon = this.$refs.backIcon.getBoundingClientRect()
          this.onboardingGuideRect = {
            navTop: nav.top,
            navLeft: nav.left,
            navWidth: nav.width,
            navHeight: nav.height,
            backTop: backIcon.top,
            backLeft: backIcon.left,
            backWidth: 48,
            backHeight: 48
          }
          console.log('距离屏幕顶部:', this.onboardingGuideRect)
        } else {
          console.log('元素未找到')
        }
      })
    } else {
      this.onboardingGuideShow = false
    }
  },
  beforeDestroy() {
    this.$EventBus.$off('refresh')
  },
  async created() {
    let courseinfo = localStorage.getItem('COURSE_INFO')
    if (!courseinfo) {
      this.$router.replace({ path: '/teachIndex' })
    } else {
      this.courseInfo = JSON.parse(courseinfo)
      try {
        let res = await getDistributionList(this.courseInfo.courseId)
        if (res.code == 200) {
          console.log('courseType', this.courseInfo.courseType)
          if (this.courseInfo.courseType == 3) {
            this.tabPanes = [
              {
                show: res.data.usualScorePercentage > 0,
                name: 'normal_classShow',
                label: '课堂表现',
                activeimg: require('@/assets/images/getScore/icon3a.png'),
                img: require('@/assets/images/getScore/icon3.png')
              },
              {
                show: true,
                name: 'normal_homework',
                label: '课后作业',
                activeimg: require('@/assets/images/getScore/icon4a.png'),
                img: require('@/assets/images/getScore/icon4.png')
              },
              {
                show: true,
                name: 'normal_exam',
                label: '任务考核',
                activeimg: require('@/assets/images/getScore/icon5a.png'),
                img: require('@/assets/images/getScore/icon5.png')
              }
            ]
          } else {
            this.tabPanes = [
              {
                show: res.data.attendanceScorePercentage > 0,
                name: 'normal_attendance',
                label: '考勤',
                activeimg: require('@/assets/images/getScore/icon1a.png'),
                img: require('@/assets/images/getScore/icon1.png')
              },
              {
                show: res.data.disciplineScorePercentage > 0,
                name: 'normal_discipline',
                label: '纪律',
                activeimg: require('@/assets/images/getScore/icon2a.png'),
                img: require('@/assets/images/getScore/icon2.png')
              },
              {
                show: res.data.usualScorePercentage > 0,
                name: 'normal_classShow',
                label: '课堂表现',
                activeimg: require('@/assets/images/getScore/icon3a.png'),
                img: require('@/assets/images/getScore/icon3.png')
              },
              {
                show: true,
                name: 'normal_homework',
                label: '课后作业',
                activeimg: require('@/assets/images/getScore/icon4a.png'),
                img: require('@/assets/images/getScore/icon4.png')
              },
              {
                show: true,
                name: 'normal_exam',
                label: '课后考核',
                activeimg: require('@/assets/images/getScore/icon5a.png'),
                img: require('@/assets/images/getScore/icon5.png')
              },
              {
                show: res.data.otherScorePercentage > 0,
                name: 'normal_other',
                label: '其他',
                activeimg: require('@/assets/images/getScore/icon6a.png'),
                img: require('@/assets/images/getScore/icon6.png')
              }
            ]
          }
          for (let i = 0; i < this.tabPanes.length; i++) {
            if (this.tabPanes[i].show) {
              this.activeName = this.$route.query.navActive
                ? this.$route.query.navActive
                : this.tabPanes[i].name
              return
            }
          }
        }
      } finally {
      }
    }
  },
  methods: {
    navTo(item) {
      this.onboardingGuideStep = 3
      this.activeName = item.name
    },
    async back() {
      if (
        this.onboardingGuideStep == 3 &&
        (this.$store.getters.guide == 0 || this.$store.getters.guide == 2) &&
        this.$store.getters.curRole == 'teacher'
      ) {
        // 1 为第一个新手引导 2为第二个新手引导 如果为0则是没有新手引导变1 如果触发过第二个新手引导再触发这个则为3
        let guide =
          this.$store.getters.guide == 0 || this.$store.getters.guide == 2
            ? 1
            : 3
        try {
          let res = await updateGuide({
            guide: guide,
            userId: this.$store.getters.userId
          })
          if (res.code == 200) {
            this.$store.dispatch('Setguide', guide)
          }
        } catch (error) {
        }
      }
      this.$router.go(-1)
    },
    routeTo(path, type) {
      if (type == 1) {
        //存储当前的布局模式
        this.$store.dispatch('SetGroupType', 1)
        // 去选课页面清楚本地缓存
        localStorage.removeItem('COURSE_INFO')
      }
      this.$router.push({
        path,
        query: {
          classId: this.courseInfo.classId,
          courseSchedulingId: this.courseInfo.courseSchedulingId
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.back {
  background-size: 48px 48px;
  background-image: url("../../assets/images/back.png");
  top: 52px;
  left: 28px;
  width: 48px;
  height: 48px;
}

.back:hover {
  background-size: 48px 48px;
  background-image: url("../../assets/images/backactive.png");
}

.left {
  height: auto;
  border-radius: 16px;
  width: 272px;
  margin-top: 18px;
  overflow: hidden;
  background: #ffffff;

  .title {
    font-family: PingFangSC, PingFang SC, sans-serif;
    font-weight: 600;
    font-size: 18px;
    padding-left: 36px;
    color: #333333;
    line-height: 73px;
    text-align: left;
    font-style: normal;
    border-bottom: 1px solid #edeff0;
  }

  .leftcontain {
    padding: 21px 0 0 37px;
  }

  .tab_item {
    margin-bottom: 40px;
    font-family: PingFangSC, PingFang SC, sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #333333;
    line-height: 22px;
    text-align: left;
    font-style: normal;
  }

  .active {
    color: #28b28b;
  }

  .icon {
    margin: 2px 18px 2px 0;
    width: 18px;
    height: 18px;
  }
}

.contain {
  display: flex;
  width: 100%;
}

@mixin btn_plain($bg_color, $color) {
  background: $bg_color;
  color: $color;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  user-select: none;

  &:active {
    background: darken($bg_color, 5%);
    color: darken($color, 18%);
  }

  &:disabled {
    background: lighten($bg_color, 5%);
    color: lighten($color, 40%);
  }

  @content;
}

.teaching {
  width: 100%;
  height: 100%;

  .top_Title {
    padding-left: 27px;
    height: 73px;
    border-bottom: 1px solid #edeff0;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .course_name {
      font-size: 18px;
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 400;
      color: #333333;
      line-height: 25px;
      display: flex;
      align-items: center;

      .course_icon {
        user-select: none;
        width: 15px;
        height: 17px;
        margin-right: 10px;
      }

      .text {
        max-width: 230px;
      }
    }

    .class_name {
      @include btn_plain(#ffffff, #333333) {
        height: 32px;
        padding: 0 10px;
        background: #ffffff;
        border-radius: 8px;
        font-size: 14px;
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 400;
        color: #333333;
        margin-right: 12px;
      }

      .text {
        // max-width: 160px;
        // color: #3683fa;
      }

      img {
        width: 16px;
        height: 16px;
        margin-right: 8px;
      }
    }

    .btns {
      display: flex;
      align-items: center;

      .group_btn {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #28b28b;
        padding: 10px;
        height: 32px;
        box-sizing: border-box;
        border-radius: 8px;
        margin-right: 12px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC, sans-serif;
        font-weight: 400;
        user-select: none;

        img {
          width: 36px;
          height: 20px;
          margin-left: 4px;
        }

        .text {
          transition: all 2s ease;
          overflow: hidden;
        }
      }
    }
  }
}

.group_open_margin {
  margin: 0 0 44px 16px;
}

.purple_txt {
  color: #6376e0;
}

.orange_txt {
  color: #ff7b5e;
}

.light_bg {
  box-shadow: 0 0 10px 0 rgba(222, 115, 83, 0.3);
}
</style>
